{% extends "topic_base.html" %}

{% from "xss/nav.html" import topic_name, topic_url, subpages with context %}

{% block javascript %}   
    // Add autogrowing to all inputs
    $('input').autoGrowInput();
{% endblock javascript %}

{% macro render_form(xss_rules) %}
    {% for rule in xss_rules %}
	
    <hr><h4><a href="{{ rule.url }}">{{ rule.title }}</a></h4>
        {% if subtopic_name == 'Secure' %}<div>Active encoding: <b>{{ rule.encoder_text }}</b></div>{% endif %}
        
	    {% for context in rule.contexts %}
	    <hr>
	    <div>{{ context.comment }}
		    <ul>
		    {% for attack in context.attacks %}
			    <li>{{ attack.comment }}
			        {% if attack.examples %}
			        <ul>
				        {% for example in attack.examples %}
				        <li><a href="#" onclick="$('input[name=\'input{{ context.context_code }}\']').val('{{ example|encode_for_javascript }}').trigger('update').trigger('focus'); return false;">{{ example|encode_for_html }}</a></li>
                        {% endfor %}
			        </ul>
			        {% endif %}
                </li>
            {% endfor %}
		    <li><a href="" onclick="$('input[name=\'input{{ context.context_code }}\']').val('null').trigger('update'); return false;">Clear form</a></li>
		    </ul>
	    </div>
	    <table class="xss_table">
		    <tr><td>
			    <div>{{ context.get_form_part(0)|encode_for_html }}<input name="input{{ context.context_code }}" class="text" type="text" value="{{ context.input|encode_for_html_attribute }}">{{ context.get_form_part(1)|encode_for_html }}</div>
		    </td></tr>
		    <tr><td>
			    Source HTML: <span class="sourceHTML">
{{ context.get_filled_encoded_form()|encode_for_html }}
</span>
		    <tr><td>
			    Rendered HTML: <span class="renderedHTML">
{{ context.get_filled_encoded_form() }}
</span>
		    </td></tr>
	    </table>
	    <p><input type="submit" value="Submit"></p>
        {% endfor %}
	
    {% endfor %}
{% endmacro %}
